// The dropdown wrapper (`<div>`)
.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;

  // Generate the caret automatically
  @include caret;
  @extend .pointer;
  @extend .pr-10;
  @extend .pl-20;
  @extend .py-5;
  transition: background 0.2s ease-in;
  &:hover, [aria-expanded="true"]{
    background: $light-green-color;
    fill: $light-green-color;
  }
}

%dropdown-hover {
	&:hover, &:focus {
		color: #262626;
		text-decoration: none;
		background-color: #f5f5f5;
	}
}

// The dropdown menu
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: $zindex-dropdown;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: $dropdown-min-width;
  padding: 0;
  margin: $dropdown-spacer 0 0; // override default ul
  @include font-size($dropdown-font-size);
  color: $dropdown-color;
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  list-style: none;
  line-height: 1.42857143;
  background-color: $dropdown-bg;
  background-clip: padding-box;
  border-radius: 4px;
  box-shadow: $drop-down-shadow;

	&:first-child  > li > a:hover, &:first-child  > li > a:focus{
		border-top-right-radius: 4px;
		border-top-right-radius: 4px;
	}
	&:last-child > li > a:hover,  &:last-child > li > a:focus{
		border-bottom-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

  > li > a {
    display: block;
    padding: 10px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
	@extend .text-truncate;
	@extend %dropdown-hover;
  }
	.drop-down-hover {
		@extend %dropdown-hover;
	}

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-left {
      right: auto;
      left: 0;
    }

    .dropdown-menu#{$infix}-right {
      right: 0;
      left: auto;
    }
  }
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
.dropup {
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: $dropdown-spacer;
  }

  .dropdown-toggle {
    @include caret(up);
  }
}

.dropright {
  .dropdown-menu {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 25px;
    margin-left: $dropdown-spacer;
    &.show{
      transition: all 150ms ease-in-out;
	    -webkit-animation: slide-in-from-left 150ms forwards;
	    animation: slide-in-from-left 150ms forwards;
    }
  }

  .dropdown-toggle {
    @include caret(right);
    &::after {
      vertical-align: 0;
    }
  }
}

.dropleft {
  .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: $dropdown-spacer;
  }

  .dropdown-toggle {
    @include caret(left);
    &::before {
      vertical-align: 0;
    }
  }
}


// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y);
}

// Links, buttons, and more within the dropdown menu
//
// `<button>`-specific styles are denoted with `// For <button>s`
.dropdown-item {
  display: block;
  width: 100%; // For `<button>`s
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  clear: both;
  font-weight: $font-weight-normal;
  color: $dropdown-link-color;
  text-align: inherit; // For `<button>`s
  white-space: nowrap; // prevent links from randomly breaking onto new lines
  background-color: transparent; // For `<button>`s
  border: 0; // For `<button>`s

  // Prevent dropdown overflow if there's no padding
  // See https://github.com/twbs/bootstrap/pull/27703
  @if $dropdown-padding-y == 0 {
    &:first-child {
      @include border-top-radius($dropdown-inner-border-radius);
    }

    &:last-child {
      @include border-bottom-radius($dropdown-inner-border-radius);
    }
  }

/*  @include hover-focus {
    color: $dropdown-link-hover-color;
    text-decoration: none;
    @include gradient-bg($dropdown-link-hover-bg);
  }*/

/*  &.active,
  &:active {
    color: $dropdown-link-active-color;
    text-decoration: none;
    @include gradient-bg($dropdown-link-active-bg);
  }*/

  &.disabled,
  &:disabled {
    color: $dropdown-link-disabled-color;
    pointer-events: none;
    background-color: transparent;
    // Remove CSS gradients if they're enabled
    @if $enable-gradients {
      background-image: none;
    }
  }
}

.dropdown-menu.show {
  display: block;
}


// Dropdown section headers
.dropdown-header {
  display: block;
  padding: $dropdown-padding-y $dropdown-item-padding-x;
  margin-bottom: 0; // for use with heading elements
  @include font-size($font-size-sm);
  color: $dropdown-header-color;
  white-space: nowrap; // as with > li > a
}

// Dropdown text
.dropdown-item-text {
  display: block;
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  color: $dropdown-link-color;
}

.dropdown.mouse-over:hover>.dropdown-menu{
  display: block;
  animation: slide-in-from-top 150ms forwards;
}

.dropright.mouse-over:hover>.dropdown-menu {
  display: block;
  animation: slide-in-from-left 150ms forwards;
}

.dropdown-menu.custom-position {
  top: 0px!important;
  transform: translate3d(-260px, -200px, 0px)!important;
  &.show {
    transform: translate3d(64px, -200px, 0px)!important;
    }
}
.dropdown-menu.custom-posTop {
  top: 0px!important;
  transform: translate3d(-100px, -270px, 0px)!important;
  &.show {
    transform: translate3d(-100px, 20px, 0px)!important;
    }
}

.dropdown-menu.custom-posleft {
  top: 0px!important;
  margin-top: 0px!important;
  transform: translate3d(-600px, 32px, 0px)!important;
  &.show {
    height: 284px!important;
    transform: translate3d(34px, 32px, 0px)!important;
    overflow-y: auto!important;
    -webkit-animation: unset;
    animation: unset;
  }
}
.list-style-none {
  list-style: none;
}
%dropdown-list{
  @extend .list-style-none, .pl-0, .bg-white, .list-style-none, .border-rds-2, .theme-text;
  li {
    @extend .py-5, .fa-tick-thick, .pl-14, .pr-40, .d-flex;
    &:before {
      @extend .mr-8, .d-block, .text-primary, .my-auto;
      width: 13px;
      visibility: hidden;
    }
    &.selected:before {
      visibility: visible;
    }
  }
}
.sort-list {
  margin-top: 9px;
  @extend .py-18 , %dropdown-list, .dropdown-shadow;
}
.filter-dropdown{
  @extend .bg-white, .border-rds-4, .mt-10, .dropdown-shadow;
  ul {
    @extend %dropdown-list, .my-18;
    min-width: 189px;
    min-height: 105px;
    li{
      @extend %dropdown-hover , .py-10, .px-0, .mx-15;
    }
  }
}

.profile-dropdown {
  min-width: 260px;
  max-width: 300px;
  transform: translate3d(64px, -200px, 0px) !important;
  display: block;
  position: absolute;
  will-change: transform;
  top: -40px;
  transition: 1s all ease;
  left: 0;
}
.highlight-child-on-hover{
  > div, > span, > li {
    color: #45526C;
    font-size: 	0.9375rem;
    &:hover, &:focus {
      color: #028C5F;
      text-decoration: none;
      background-color: #ECF8F3;
      @extend .border-rds-4;
    }

    i  {
      font-size: 18px;
    }
  }
  .child-item-content {
    @extend .px-12, .py-8, .d-flex, .mb-8, .align-items-center;
    i {
      @extend .pr-10, .fz-20;
    }
  }
  @extend .pointer;
}

.drop-down-transparent {
  box-shadow: none;
  margin-top: -6px;
  background: transparent;
  padding-top: .5rem;
  min-width:100%;
  &.md-p {
    padding-top: .9rem;
  }
  &.min-w {
    min-width:196px;
  }
  &.min-sm {
    min-width:350px;
  }
  &.min-md {
    min-width:270px;
  }
  &.max-w {
    max-width:350px;
  }
  &.left-lg {
    left: -200px;
  }
  &.left-md {
    left: -130px;
  }
  &.left-sm {
    left: -60px;
  }
  &.left-x-sm {
    left: -30px;
  }
  &.left-xx-sm {
    left: -3px;
  }
  &.top {
    top: -120px;
  }
}

.affected-drop-down {
  width: 300px;
  padding: 10px;
  margin-top: 6px;
  display: block!important;
}

.global-add-dropdown {
  box-shadow: none;
  margin-left: 0!important;
  padding-left: 1.6rem;
  background: transparent;
  @extend .dropdown-menu;
}

.z-in-3 {
  z-index: 3;
}

.z-in-2 {
  z-index: 2;
}
.z-in-10{
  z-index: 10 !important;
}

.schedule-demo-list{
  @extend .w-fit-content, .py-25, .pr-50, .pl-60, .mx-auto;
  li::marker{
    @extend .text-muted, .fz-30;
  }
  li{
    div{
      @extend .position-relative, .lh-1point4, .top-n5;
    }
  }
}

.user-detail-card-container {
  .mat-dialog-container {
    @extend .border-rds-4;
    box-shadow: $drop-down-shadow;
  }


  left: 36% !important;
  .user-details-card {
    @extend .align-items-center, .border-rds-2, .d-flex, .flex-wrap, .p-20, .shadow-all-b2, .justify-content-between;
    min-width: 250px;
    max-width: 280px;
    background: white;
    position: relative;
    .user-name-container {
      @extend .d-flex, .flex-column, .px-10, .mr-auto;
      max-width: 79% !important;
      .user-name-info {
        @extend .rb-medium, .fz-16, .theme-text, .d-flex, .ts-col-100, .pb-5;
      }
    }
    .user-mail {
      @extend .text-t-highlight, .pt-2, .pb-5, .d-flex, .align-items-center;
      .mail-icon {
        @extend .fa-email, .pr-7;
        line-height: 0;
      }
    }
  }
}
